<template>
	<view class="firstDetails">
		<AdBnner :list="list1" height="140"></AdBnner>
		<view class="content">
			<view class="A item">
				<view class="left">
					蓝花楹-金桂
				</view>
				<view class="right">
					需要<text class="red">2000</text>株
				</view>
			</view>
			<view class="B item">
				<view class="first">
					<view class="b_item">
						米径:<text class="blue">12</text>cm
					</view>
					<view class="b_item">
						冠幅:<text class="blue">10</text>cm
					</view>
					<view class="b_item">
						冠幅:<text class="blue">10</text>cm
					</view>
				</view>
				<view class="second">
					<view class="b_item">
						杆数:<text class="blue">12</text>杆
					</view>
					<view class="b_item">
						<text class="blue">精品</text>
					</view>
				</view>
			</view>
			<view class="C item">
				<view class="left-details">
					详情说明:
				</view>
				<view class="right-details">
					详情说明详情说明详情说明详情说明详情说明详情说明详情说明详情说明详情说明详情说明详情说明详情说明详情说明详情说明详情说明
				</view>
			</view>
			<view class="C item">
				<view class="left-details">
					查看电话:
				</view>
				<view class="right-details find">
					***********<text class="blue">积分查看</text>
				</view>
			</view>
		</view>
		<view class="list-container">
			<view class="top1">
				{{myType==1?'商家报价':'我的报价'}}
			</view>
			<view class="list" v-for="item in 10" @click="goDetails" v-if="myType==1">
				<view class="main-container">
					<view class="left-img">
						<image src="@/static/index/tx.png" mode=""></image>
					</view>
					<view class="right-container">
						<view class="top">
							<view class="name">
								<!-- <view class="vip">
									
								</view> -->
								<view class="thing">
									李大大的小宝宝
								</view>
							</view>
							<view class="dolor red">
								<text class="sum">1020元</text>
							</view>
						</view>
						<view class="content">
							<view class="content-top">
								<view class="bx">
									米径：12米
								</view>
								<view class="gf">
									冠幅：10cm
								</view>
								<view class="gd">
									高度：80cm
								</view>
							</view>
							<view class="center">
								<view class="jp">
									精品
								</view>
								<view class="wz">
									2万株
								</view>
								<view class="empt">
								</view>
							</view>
						</view>
						<view class="intro">
							四川省成都市
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		AdBnner
	} from "@/components/ad-banner/ad-banner.vue"
	export default {
		props: ['myType','list'], //1为求购，2为供应
		components: {
			AdBnner
		},
		onShow() {
			console.log(this.myType, 333)
		},
		methods: {
			goDetails() {
				uni.navigateTo({
					url: '/my_pages/components/secDetails?myType=' + this.myType
				})
			}
		},
		onLoad(res) {
			console.log(res)
		},
		created(res) {
			console.log(this.myType, 333)
			let title = this.myType == 1 ? '我的求购' : '我的报价'
			uni.setNavigationBarTitle({
				title: title
			});
			console.log(this.list,res)
		},
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				],
			};
		}
	}
</script>

<style lang="scss" scoped>
	.firstDetails {
		color: #979797;

		.red {
			color: #FD4343;
		}

		.blue {
			color: #00C777;
		}

		.list-container {
			.top1 {
				background-color: #00C777;
				color: #fff;
				width: fit-content;
				margin-left: 15rpx;
				padding: 4px 0;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			padding: 20rpx 15rpx;

			.item {
				padding: 15px 0;
				border-bottom: 1px solid #E2E2E2;
			}

			.A {
				display: flex;
				align-items: center;

				.left {
					color: #00C777;
					flex: 1;
				}

				.right {
					width: 100px;
				}
			}

			.B {
				display: flex;
				flex-direction: column;

				.first {
					display: flex;
					margin-bottom: 20rpx;

					.b_item {
						margin-right: 40rpx;
					}
				}

				.second {
					display: flex;

					.b_item {
						margin-right: 130rpx;
					}
				}
			}

			.C {
				display: flex;

				.left-details {
					width: 80px;
				}

				.right-details {
					flex: 1;

				}

				.find {
					text-align: right;
					margin-right: 20rpx;
				}
			}

			.D {}
		}

		.list {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			margin-bottom: 15rpx;
			box-shadow: 2px 3px 7px #807e7e4f;
			border-radius: 13rpx;

			.main-container {
				height: 160rpx;
				display: flex;
				padding: 0 20rpx;
				background: #fff;
				font-size: 22rpx;
				padding: 12rpx 0;
				border-bottom: 1px solid #E2E2E2;
				margin: 15rpx;

				.left-img {
					width: 160rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.right-container {
					flex: 1;
					font-size: 22rpx;
					width: 100%;

					.top {
						display: flex;
						border-bottom: 1px solid #E2E2E2;
						justify-content: center;
						align-items: center;
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;

						.name {
							flex: 1;
							color: #00C777;
							display: flex;

							.vip {
								background: #00C777;
								color: #fff;
								border-radius: 25rpx;
								padding: 0 15rpx;
								margin-right: 15rpx;
							}
						}

						.dolor {
							color: #00C777;

							.sum {
								color: #FFAB68;
							}
						}
					}

					.content {
						display: flex;
						flex-direction: column;
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;

						.content-top {
							display: flex;
							margin: 15rpx 0px;

							.bx,
							.gf,
							.gd {
								width: 33.33%;
							}
						}

						.center {
							display: flex;

							.jp,
							.wz,
							.empt {
								width: 33.33%;
							}

							.jp {
								color: #00C777;
							}

							.wz {
								color: #FFAB68;
							}

						}

						.intro {
							color: #C9C9C9;
						}
					}

					.intro {
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;
						color: #C9C9C9;
						width: 220px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}
				}
			}

			.list-bottom {
				margin: 15rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #4F4F4F;

				.liulan {
					flex: 1;
				}

				.ck {
					width: 70px;
					color: #fff;
					background-color: #00C777;
					text-align: center;
					border-radius: 26rpx;
					padding: 5rpx 0;
				}
			}
		}
	}
</style>
